<template>
	<div class="system-menu-container">
		<div :class="visible ? 'box-modal-hide' : 'box-modal-show'" style="padding:15px;">
			<el-form :model="feedback" size="small" label-width="100px" class="mt15 mb15">
				<el-row>
					<el-col :span="6">
						<el-form-item label="标题">
							<el-input v-model="feedback.staffer_no" placeholder="请输入标题" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="反馈人">
							<el-input v-model="feedback.staffer_name" placeholder="请输入反馈人" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="类型">
							<el-select v-model="feedback.type" placeholder="请选择状态" clearable class="w100">
								<el-option label="代码错误" value="1"></el-option>
								<el-option label="安全相关" value="2"></el-option>
								<el-option label="性能问题" value="3"></el-option>
								<el-option label="设计缺陷" value="4"></el-option>
								<el-option label="其他" value="5"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="状态">
							<el-select v-model="feedback.status" placeholder="请选择状态" clearable class="w100">
								<el-option label="待处理" value="0"></el-option>
								<el-option label="已处理" value="1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item align="right">
							<el-button icon="el-icon-refresh">清空</el-button>
							<el-button type="primary" icon="el-icon-search" @click="submitTap()">立即查询</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-card shadow="never">
				<div style="padding-bottom: 15px">
					<el-row>
						<el-button type="danger" size="small" icon="el-icon-delete">批量删除</el-button>
						<el-button type="primary" size="small" icon="el-icon-edit">批量处理</el-button>
					</el-row>
				</div>
				<el-table v-loading="loading" :data="tableData" stripe style="width: 100%">
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column fixed label="标题" show-overflow-tooltip>
						<template #default="scope">
							<span>{{ scope.row.title }}</span>
						</template>
					</el-table-column>
					<el-table-column fixed label="类型">
						<template #default="scope">
							<!-- 类型: 1 代码错误 2 安全相关 3 性能问题 4 设计缺陷 5 其他 -->
							<span v-if="scope.row.type == 1" class="color-info">代码错误</span>
							<span v-else-if="scope.row.type == 2" class="color-info">安全相关</span>
							<span v-else-if="scope.row.type == 3" class="color-info">性能问题</span>
							<span v-else-if="scope.row.type == 4" class="color-info">设计缺陷</span>
							<span v-else-if="scope.row.type == 5" class="color-info">其他</span>
						</template>
					</el-table-column>
					<el-table-column fixed label="反馈人">
						<template #default="scope">
							<span>{{ scope.row.staffer_name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="状态">
						<template #default="scope">
							<span v-if="scope.row.status == 0" class="color-primary">待处理</span>
							<span v-else class="color-info">已处理</span>
						</template>
					</el-table-column>
					<el-table-column prop="remark" show-overflow-tooltip label="备注"></el-table-column>
					<el-table-column label="创建日期" sortable fixed="right">
						<template #default="scope">
							<span>{{ scope.row.created_at }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="105" fixed="right">
						<template #default="scope">
							<el-button size="mini" type="text" @click="checkDetail(scope.row)">编辑</el-button>
							<el-button size="mini" class="color-danger" type="text" @click="deleteTap(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="block" style="margin-top: 15px">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pageInfo.now"
						:page-sizes="[10, 20, 50, 100, 200]"
						:page-size="pageInfo.size"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pageInfo.count"
					>
					</el-pagination>
				</div>
			</el-card>
		</div>
		<detail v-if="visible" :data="rowData" @closeTap="handleClose"></detail>
	</div>
</template>

<script>
import { feedback_index, feedback_del } from '@/api/feedback';
import detail from './component/detail.vue';
export default {
	components: { detail },
	name: 'authority',
	data() {
		return {
			visible: false,
			feedback: {},
			pageInfo: {
	now: 1,
	size: 20
},
			tableData: [],
			loading: true
		};
	},
	created() {
		this.initData();
	},
	methods: {
		initData() {
			var param = {
				staffer_name: this.feedback.staffer_name || undefined,
				code_tip: this.feedback.code_tip || undefined,
				staffer_no: this.feedback.staffer_no || undefined,
				status: this.feedback.status || undefined,
				pageSize: this.pageInfo.size || undefined,
				pageNow: this.pageInfo.now || undefined,
			};
			feedback_index({ ...param })
				.then((res) => {
					if (res.statusCode !== 200) {
						this.$message({
							type: 'error',
							message: res.message
						});
						return true;
					}
					this.pageInfo = res.page;
					this.tableData = res.lists;
				})
				.finally(() => {
					this.loading = false;
				});
		},
		handleClose() {
			this.visible = false;
		},
		checkDetail(data) {
			this.rowData = data;
			this.visible = true;
		},
		submitTap() {
			this.initData();
		},
		deleteTap(e) {
			this.loading = true;
			feedback_del(e.id)
				.then((res) => {
					if (res.statusCode == 200) {
						this.$message({
							type: 'success',
							message: res.message
						});
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		handleSizeChange(val) {
			this.pageInfo.size = val;
			this.initData();
		},
		handleCurrentChange(val) {
			this.pageInfo.now = val;
			this.initData();
		},
	},
};
</script>
